<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=pt-BR"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script type="text/javascript">
  var map;
  var geocoder;
  var marker;
  var infoWindow;
  
  function initialize() {
    var latlng = new google.maps.LatLng(-7.232604194138538, -35.8865647578125);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
  
  function openPopUp(){
	  window.open('http://localhost:8080/sig/services/latlngPopUp.html', 'Pagina', 'STATUS=NO, TOOLBAR=NO, LOCATION=NO, DIRECTORIES=NO, RESISABLE=NO, SCROLLBARS=YES, TOP=10, LEFT=10, WIDTH=500, HEIGHT=400');
  }
  
  function doReverseGeocoder(lat,lng){
	  if(!geocoder){
		  geocoder = new google.maps.Geocoder();
	  }
	  var latlng = new google.maps.LatLng(lat, lng);
	  geocoder.geocode( { 'latLng': latlng}, function(results, status) {
		  if (status == google.maps.GeocoderStatus.OK) {
			  map.panTo(results[0].geometry.location);
			  map.fitBounds(results[0].geometry.viewport);
			  var location = results[0].geometry.location;
			  var content = results[0].formatted_address + "<br>";
			  content += "Lat: " + location.lat() + "<br>";
			  content += "Lng: " + location.lng();
			  if(!infoWindow){
				  infowindow = new google.maps.InfoWindow(
					      { content: content,
					        size: new google.maps.Size(50,50)
					      });
			  }else{
				  infoWindow.setContent(content);
			  }
			  if(!marker){
				  marker = new google.maps.Marker({
		              map: map, 
		              position: location
		          });
				  google.maps.event.addListener(marker, 'click', function() {
					    infowindow.open(map,marker);
				  	}); 
			  }else{
				  marker.setPosition(results[0].geometry.location);
			  }
		  }
	  });
  }
  
</script>
</head>
<body onload="initialize()">
  <table style="width:100%; height:100%" border="1">
  	<tr>
  		<td style="width:30%; height:100%">
  			<div id="map_control" style="width:100%; height:100%">
  				<table style="width:30%; height:20%">
  					<tr>
  						<td>
  							<input type="button" value="ReverseGeocode" onclick="openPopUp()" />
  						</td>
  					</tr>
  				</table>
  			</div>
  		</td>
  		<td id="map_column" style="width:70%; height:100%">
  			<div id="map_canvas" style="width:900; height:700"></div>
  		</td>
  	</tr>
  </table>
</body>
</html>